<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画机制</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 100px;
        height: 100px;
        background-color: aquamarine;
        position: absolute;
        /* left: 0; */
        /* left: calc(100% - 100px); */

        /* 动画的名称 */
        animation-name: move;

        /* 动画持续的时间 */
        animation-duration: 2s;
        
        /* 动画的填充模式 ：当前div在动画结束时显示的位置
        forwards  元素在动画最后一帧的位置停止 
        backwords 元素在动画结束后回到开始的位置显示*/
        animation-fill-mode: forwards;

        /* 动画执行次数 
            1
            2
            ....
            infinite 无限次*/
        animation-iteration-count:infinite;

        /* 动画的速度
        linner  匀速
        ease    先快后慢
        case-in 先慢后快 */
        animation-timing-function: ease;

        /* 动画的延迟时间 */
        animation-delay: 2s;

        /* 速写 */
        animation: name duration timing-function delay iteration-count direction fill-mode;
       }
        /* 动画的状态
          paused  暂停
          running 执行 */
         div:hover {
            animation-play-state: paused;
        }

    
        
    /* 1.动画的定义
       @keyframes css的固定语法
       move  动画的名称，可自定义
       from  动画的开始事件
       to    动画的结束事件 */
    @keyframes move{
        from {
            left: 0;

        }
        to {
            left: calc(100% - 100px);
        }
    }
    
</style>
<body>
    <div></div>
</body>
</html>